<template>
  <div class="index">
    <TagSelector title="归档标签" @tag="getbytag"></TagSelector>
    <div class="container">
      <transition name="fade">
        <wordcover-full v-show="viewer"
                        :viewed="viewed"
                        :types="types"
                        @home="backhome"
                        @good="good(viewed.id)"
                        @bad="bad(viewed.id)"
                        @update="update"
        ></wordcover-full>
      </transition>
      <div class="mainer">
        <div class="wordcontainer">
          <div class="space"></div>

          <transition-group name="fade" tag="div">
            <div class="wordcover"
                 v-show="!viewer&&!updating"
                 v-for="item in top"
                 :key="item.id"
                 :item="item"
                 types="top"
                 is="wordcover"
                 @go="gopage(item.id)"
                 @good="good(item.id)"
                 @bad="bad(item.id)"
                 @comment="send(item.id)"
                 @update="update"
            ></div>
          </transition-group>
          <transition-group name="fade" tag="div">
            <div class="wordcover"
                 v-show="!viewer&&!updating"
                 v-for="item in list"
                 :key="item.id"
                 :item="item"
                 types="list"
                 is="Wordcover"
                 @go="gopage(item.id)"
                 @good="good(item.id)"
                 @bad="bad(item.id)"
                 @comment="send(item.id)"
                 @update="update"
            ></div>
          </transition-group>
          <transition name="fade">
            <div class="pages"
                 v-show="!viewer"
                 :page="page"
                 :total="total"
                 @turnto="turnto"
                 is="page-selector"
            ></div>
          </transition>
          <div class="totop" v-show="hasscr" @click="totop">
            <span class="iconfont icon-arrowup"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="bg"></div>
  </div>
</template>
<script>
  import '../assets/icon/iconfont.css'
  import Wordcover from './Wordcover'
  import WordcoverFull from './Wordcover_full'
  import PageSelector from './PageSelector'
  import TagSelector from './TagSelector'
  import bus from '../assets/js/Eventbus';
  export default {
    name: 'Index',
    components: {
      Wordcover,
      WordcoverFull,
      PageSelector,
      TagSelector
    },
    data() {
      return {
        user: 'guest',
        page: 1,
        total:1,
        scoll: 0,
        hasscr: false,
        viewer: false,
        viewed: {},
        speed: 0,
        types: '',
        top: [],
        updating:false,
        list: [],
      }
    },
    mounted() {
      let _this = this;
      this.$http.post('/api/setCookie').then((res) => {
        this.$store.commit('setUser',res.data.user)
      });
      bus.$on('gotoinfo',()=>{
        this.$router.push('/blog/3');
      });
      window.onscroll = function () {
        let scr = document.documentElement.scrollTop || document.body.scrollTop;
        _this.hasscr = scr > 0;
        bus.$emit('scoll',scr)
      };
      this.update(()=>{
        if(this.$route.params.blogid){
          this.go(this.$route.params.blogid);
        }
      });
    },
    watch: {
      '$route' (to, from) {
        if (to.params.blogid||parseInt(to.params.blogid)===0) {
          this.go(to.params.blogid);
        } else {
          this.home();
        }

        if(to.params.page){
          this.page=to.params.page;
          this.update();
        }
      }
    },
    methods: {
      gopage(id){
        this.$router.push({name:'blog',params:{blogid:id}});
      },
      go(id) {
        let f = false;
        this.$store.commit('setViewing',true);
        this.$http.post('/api/14ch/saw', {id: id}).then((res) => {
        });
        for (let i in this.top) {
          if (this.top[i].id === id) {
            this.viewed = this.top[i];
            f = true;
            this.types = 'top';
            break;
          }
        }
        if (!f) {
          for (let i in this.list) {
            if (this.list[i].id === id) {
              this.viewed = this.list[i];
              this.types = 'list';
              f=true;
              break;
            }
          }
        }
        if(!f){
          this.$http.post('/api/14ch/getbyid',{id:id}).then((res)=>{
            this.viewed = res.data.viewed;
          })
        }
        this.scoll = document.documentElement.scrollTop || document.body.scrollTop;
        this.totop();
        this.viewer = true;

      },
      turnto(i){
        this.page=i;
        this.updating=true;
        this.update();
        this.totop();
      },
      getbytag(tag){
        this.$store.commit('setTag',tag);
        this.page=1;
        this.update();
      },
      update(callback) {
        this.$http.post('/api/14ch/getwords', {page: this.page,tag: this.$store.state.tag}).then((res) => {
          this.top = res.data.top;
          this.list = res.data.list;
          if(res.data.total) this.total= res.data.total;
          this.updating=false;
          if(this.viewer){
            let f=false;
            for (let i in this.top) {
              if (this.top[i].id === this.viewed.id) {
                this.viewed = this.top[i];
                f = true;
                this.types = 'top';
                break;
              }
            }
            if (!f) {
              for (let i in this.list) {
                if (this.list[i].id === this.viewed.id) {
                  this.viewed = this.list[i];
                  this.types = 'list';
                  f=true;
                  break;
                }
              }
            }
            if(!f){
              this.$http.post('/api/14ch/getbyid',{id:this.viewed.id}).then((res)=>{
                this.viewed = res.data.viewed;
              })
            }
          }
        });
        if (callback) {
          callback();
        }
      }
      ,
      good(id) {
        this.$http.post('/api/14ch/good', {id: id}).then((res) => {
          if (res.body === 'success') {
          } else {
          }
          this.update();
        })
      },
      bad(id) {
        this.$http.post('/api/14ch/bad', {id: id}).then((res) => {
          if (res.body === 'success') {

          } else {

          }
          this.update();
        })
      },
      home() {
        this.update(() => {
          this.viewer = false;
          this.toscoll();
        });
      },
      backhome(){
        this.$router.push('/');
      },
      totop() {
        let _this = this;
        let timer = window.setInterval(() => {
          if (document.documentElement.scrollTop > 0 || document.body.scrollTop > 0) {
            document.documentElement.scrollTop -= _this.speed;
            document.body.scrollTop -= _this.speed;
            _this.speed++;
          } else {
            _this.speed = 0;
            window.clearInterval(timer);
          }
        }, 10);
      },
      toscoll() {
        let _this = this;
        let timer2 = window.setInterval(() => {
          if ((document.documentElement.scrollTop && document.documentElement.scrollTop < _this.scoll - 50) || (document.body.scrollTop && document.body.scrollTop < _this.scoll - 50)) {
            document.documentElement.scrollTop += _this.speed;
            document.body.scrollTop += _this.speed;
            _this.speed++;
          } else {
            document.documentElement.scrollTop = _this.scoll;
            document.body.scrollTop = _this.scoll;
            _this.speed = 0;
            window.clearInterval(timer2);
          }
        }, 10);
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0 0;
  }

  .wordcontainer {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: normal;
    cursor: default;
  }

  .wordcover {
    display: flex;
    position: relative;
    height: 200px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 5px;
    /*box-shadow: 0 1px 2px #bcbcbc;*/
    overflow-y: hidden;
  }



  .totop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 35px;
    height: 35px;
    font-weight: bold;
    font-size: 40px;
    background: #bce0fe;
    box-shadow: 0 0 5px #95a2c9;
    border-radius: 10px;
    cursor: pointer;
    line-height: 20px;
  }

  .pages{
    display:flex;
    position: relative;
    top:10px;
    /*width:100%;*/
    height:40px;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    align-items:center;
  }
  @media (min-width: 768px) {
    .totop{
      right:calc(50% - 300px);
    }
    .bg{
      position: fixed;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: rgb(217, 235, 249);
    }
    .mainer {
      display: block;
      position: absolute;
      top: 0;
      left: calc(50% - 250px);
      height: 100%;
      width: 500px;
      /*transform:translate(-50%,0);*/
      color: #333;
      text-align: center;
    }

    .space {
      height: 60px;
      width: 0;
    }
    .wordcover {
      width: 100%;
      /*left: 15%;*/
      background: #fff;
      height:250px;
      /*box-shadow: 0 1px 4px #bcbcbc;*/
      border-radius: 5px;
      transition: all 0.5s ease;
    }



    /*.wordcover:hover {*/
      /*box-shadow: 0 1px 8px #bcbcbc;*/
      /*height: 250px;*/
    /*}*/


  }

  @media (max-width: 768px) {
    .mainer {
      display: block;
      position: absolute;
      height: calc(100% - 72px);
      width: 100%;
    }

    .space {
      height: 60px;
    }

    .wordcover {
      z-index: -999;
      width: 90%;
      background: #f6f6f6;
      left: 5%;
      height: 310px;
      transition: all 0.5s ease;
    }



  }

  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
